<template>
    <div class="houseAlbum-view">
        <el-dialog
                title="上传照片"
                :visible.sync="dialogVisibleshow"
                :before-close="handleClose">
             <div>
                 <el-upload
                         class="upload-demo"
                         :action="importFileUrlInfo"
                         :headers="headersMsg"
                         :on-preview="handlePreview1"
                         :on-remove="handleRemove1"
                         :before-remove="beforeRemove1"
                         multiple
                         :limit="3"
                         :on-exceed="handleExceed1"
                         :on-success="groupPhoto"
                         :on-error="groupPhotoerror"
                         :file-list="fileList">
                     <el-button size="small" class="sure-button">点击上传</el-button>
                     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，图片要求宽高：1000*750</div>

                 </el-upload>

             </div>
            <div class="houseAlbum-view-input-itemArr">
                <el-select v-model="grouping" placeholder="请选择分组">
                    <el-option
                            v-for="item in itemArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <div style="color: red">{{groupPhotoerrormsg}}</div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button  class="cancel-button" @click="dialogVisibleshow = false">取 消</el-button>
                <el-button class="sure-button" type="primary" @click="determine">确 定</el-button>
          </span>
        </el-dialog>
        <div class="houseAlbum-view-titel">
            <div class="houseAlbum-view-titel-text">楼盘海报图</div>
            <div class="houseAlbum-view-titel-suer">*</div>
        </div>
        <div class="houseAlbum-view-album">
            <div class="houseAlbum-view-album-view">
                <!--<i class="el-icon-plus"></i>-->
                <el-upload
                        :action="importFileUrl"
                        :headers="headersMsg"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="posterImg">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" style="width: 100px ;height: 100px">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
            <div class="houseAlbum-view-album-text">上传楼盘海报图</div>
        </div>
        <div class="houseAlbum-view-titel">
            <div class="houseAlbum-view-titel-text">海报图描述</div>
            <div class="houseAlbum-view-titel-suer">*</div>
        </div>
        <div  class="houseAlbum-view-textarea">
            <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="可填写文字，图片，视频等"
                    v-model="textarea">
            </el-input>
        </div>
        <div class="houseAlbum-view-titel">
            <div class="houseAlbum-view-titel-text">楼盘视频</div>
        </div>
        <div class="houseAlbum-view-album-list">
            <div class="houseAlbum-view-album">
                <div class="houseAlbum-view-album-view">
                    <el-upload
                            :action="importFileUrl"
                            :headers="headersMsg"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="videoUrl">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
                <div class="houseAlbum-view-album-text">上传楼盘视频</div>
            </div>
        </div>
        <div >
            <el-input
                    class="houseAlbum-view-input"
                    placeholder="请输入视频链接"
                    v-model="videourl"
                    clearable>
            </el-input>
        </div>
        <div class="houseAlbum-view-titel">
            <div class="houseAlbum-view-titel-text">楼盘相册<div class="user-input-sure">*</div></div>
        </div>
        <div class="houseAlbum-view-addalbum">
            <div class="houseAlbum-view-addalbum-botton">
                <div class="houseAlbum-view-addalbum-botton1">
                    <div :class="columnShow==1?'addalbum-botton1':'addalbum-botton2'" @click="column(1)">全 部</div>
                    <div :class="columnShow==2?'addalbum-botton1':'addalbum-botton2'" @click="column(2)">分 组</div>
                </div>
                <div class="addalbum-text">格式：jpg,png; 尺寸：1000*750(像素）；照片总新上限为150张；单个分组照片上限为20张</div>
                <div class="addalbum-botton1"  @click="dialogVisibleshow = true">上传照片</div>
            </div>

            <div v-show="columnShow==1" class="houseAlbum-view-album-list">
                <div class="houseAlbum-view-album" v-for="item,index in listAlbum" :key="index">
                    <el-popover placement="top" width="50" v-model="imgVisible[index]">
                        <div class="img-popover-right">
                            <div @click="deleteImg(index,item.id)" style="cursor: pointer;">删除</div>
                        </div>
                        <el-button slot="reference" class="houseAlbum-view-album" style="margin-left: 30px;">
                            <div class="houseAlbum-view-album-img">
                                <img :src="item.imgUrl">
                            </div>
                            <div class="houseAlbum-view-album-text">{{item.name}}</div>
                        </el-button>
                    </el-popover>
                </div>
            </div>

            <div v-show="columnShow==2" class="houseAlbum-view-album-list">
                <div  @click="addHouseAlbum" class="houseAlbum-view-album">
                    <div class="houseAlbum-view-album-view1">
                        <i class="el-icon-plus"></i>
                    </div>
                    <div class="houseAlbum-view-album-text">添加分类</div>
                </div>

                <div v-for="(item, index) in itemArr" :key="index">
                    <el-popover
                            placement="right"
                            width="90"
                            v-model="visible2[index]">
                        <div class="houseAlbum-popover-right">
                            <div @click="rename(index)">重命名</div>
                            <div @click="deleteHouseAlbum(index,item.id)">删除</div>
                            <div>向前移一位</div>
                            <div>向后移一位</div>
                        </div>
                        <!--<el-button slot="reference">删除</el-button>-->
                        <el-button slot="reference" class="houseAlbum-view-album">
                            <div class="houseAlbum-view-album-view1">
                                <img src="../../../assets/img/Rectanglepath@2x.png"/>
                            </div>
                        </el-button>
                    </el-popover>
                    <div v-if="inputrename==index" style="width: 110px" class="houseAlbum-view-margin-top">
                        <el-input @blur="inputblur(item.name,item.id)" v-model="item.name" placeholder="请输入内容"></el-input>
                    </div>
                    <div v-else class="houseAlbum-view-album-text houseAlbum-view-margin-top">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div  class="addHouse-user-button">
            <div class="addHouse-user-button-button1" @click="previousStep">上一步</div>
            <div class="addHouse-user-button-button2" @click="preservation">保 存</div>
            <div class="addHouse-user-button-button2" @click="colos">取消</div>
        </div>

    </div>
</template>

<script>
    const baseInfo =[
        {visible2:false,inputvule:"未分组"},
    ];
    export default {
        name: "houseAlbum",
        data() {
            return {
                imgVisible: [],
                groupPhotoerrormsg:"",
                linkerId:"",
                videourl:"",
                posterimg:"",
                grouping: '',
                fileList: [],
                dialogVisibleshow:false,
                items: [0],
                itemArr:[],
                visible2:[],
                ele: '',
                affair : 1,
                inputrename:-1,
                list:[baseInfo],
                // visible2:false,
                // visible3:false,
                importFileUrl:"https://sit.zooming-data.com/dist-admin/api/dist_uploadFile",
                importFileUrlInfo:"https://sit.zooming-data.com/dist-admin/api/dist_linkerSceneFileUpload",
                headersMsg:{
                    authorization:this.$store.getters.userData.token,
                },
                dialogImageUrl: '',
                dialogVisible: false,
                textarea:"",
                input10: '',
                columnShow:1,
                input:"",
                inputvule:"未分组",
                namenum:1,
                groupphotoInfo:{},
                listAlbum:[],
            };
        },
        props:{
            newLinkerId:{
                type:String,
            },

        },watch: {
            newLinkerId:{
                handler(newValue, oldValue) {
                    this.linkerId=newValue
                    this.getAlbumInfo();
                    this.getlistAlbum();
                }}},
        mounted(){
        },
        methods: {

            //删除图片
            deleteImg(index,itemId) {
                //删除后台图片数据

                //删除当前页面列表数据
                this.listAlbum.splice(index, 1);
            },
            getlistAlbum(){
                let _this = this;
                let params1={
                    id:this.linkerId,
                }
                _this.Api.setting.distLinkerSceneList(params1).then((data)=>{
                    console.log(data,"aaaaa")
                    this.listAlbum=data.data.linkerScenes
                })
            },
            handleRemove1(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview1(file) {
                console.log(file);
            },
            handleExceed1(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove1(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            determine(){
                let _this = this;
                let params={
                    id:_this.linkerId,
                    sceneGroupId:_this.grouping,
                    name:_this.groupphotoInfo.fileName,
                    imgUrl:_this.groupphotoInfo.imgUrl,
                    thumbnailUrl:_this.groupphotoInfo.thumbnailUrl,
                }
                console.log(_this.groupphotoInfo,"上传成功")
                if(_this.grouping==""){
                   this.groupPhotoerrormsg="请选择分组"
                }else {
                    _this.Api.setting.distSaveLinkerScene(params).then((data)=>{
                        this.dialogVisibleshow = false
                        this.getlistAlbum()
                        // 上传成功后清掉
                        console.log(data,"上传成功")
                    })
                }
            },
            preservation(){
                let _this = this;
                let params={
                    id:this.linkerId,
                    posterImgUrl:this.posterimg,
                    posterDescribe:this.textarea,
                    fyVideo:this.videourl,
                }
                _this.Api.setting.distSaveLinkerAlbumOtherInfo(params).then((data)=>{
                    if(data.returnCode==10000){
                        this.$emit("colosHouseAlbum");
                    }else {
                        this.$message({
                            type: 'success',
                            message: data.msg
                        });
                    }
                })
            },

            addHouseAlbum(){
                let _this = this;
                  this.namenum++
                let params={
                    id:this.linkerId,
                    name:"分组"+this.namenum,
                }
                let params1={
                    id:this.linkerId,
                }
                _this.Api.setting.distSaveLinkerSceneGroup(params).then((data)=>{
                    this.ele ++;
                        _this.Api.setting.distSeeLinkerSceneGroup(params1).then((data)=>{
                            console.log(data,"aaaaa")
                            this.itemArr=data.data.linkerSceneGroups
                            // this.itemArr.push(this.ele)
                        })

                })

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            deleteHouseAlbum(index,id) {
                let _this = this;
                let params1={
                    id:this.linkerId,
                    sceneGroupId:id,
                }
                _this.Api.setting.distDeleteLinkerSceneGroup(params1).then((data)=>{
                    console.log(data,"aaaaa")
                    this.itemArr.splice(index, 1);
                })
            },
            rename(num){
                this.inputrename=num
            },
            inputblur(name,id){
                let _this = this;
                let params1={
                    id:this.linkerId,
                    sceneGroupId:id,
                    name:name,
                }
                _this.Api.setting.distEditLinkerSceneGroupName(params1).then((data)=>{
                    console.log(data,"aaaaa")
                    this.inputrename=-1
                })

                console.log(name,id,'你妹的')
            },
            column(num){
               this.columnShow=num
            },
            colos(){
                this.$emit("colosHouseAlbum");
            },
            //上传文件
            uploadFiles(){
                let _this = this;
                _this.Api.setting.distUploadFile().then((data)=>{

                    console.log("kkkkkkkkkkkkkkkkkkk",data)
                })
            },
            getAlbumInfo(){
                let _this = this;
                let params1={
                    id:this.linkerId,
                }
                _this.Api.setting.distSeeLinkerSceneGroup(params1).then((data)=>{
                    console.log(data,"aaaaa")
                    this.itemArr=data.data.linkerSceneGroups
                })
            },
            groupPhoto(response, file, fileList){
                this.groupphotoInfo=response.data
                console.log(response, file, fileList,"相册相册")
            },
            groupPhotoerror(err, file, fileList){
                this.groupPhotoerrormsg="上传失败，图片不符要求宽高:1000*750"
                console.log(err.message, "相册相册失败失败",file)
            },
            posterImg(response, file, fileList){
                this.posterimg=response.data.url
                console.log(response, file, fileList,"海报海报")
            },
            videoUrl(response, file, fileList){
                this.videourl=response.data.url
                console.log(response, file, fileList,"视频视频")
            },
            previousStep(){
                this.$emit("houseAlbumshow");
            },
            handleRemove(file, fileList) {
                console.log(file, fileList,"aaaaaaaaaaa");
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>
<style>
    .houseAlbum-view .el-upload-list--picture-card .el-upload-list__item{
        width: 78px;
        height: 78px;
    }
    .houseAlbum-view .el-button{
        border: none;
        margin: 0px;
        padding: 0px;
    }
    .houseAlbum-view .el-dialog--small {
        width:517px;
    }
    .houseAlbum-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .houseAlbum-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
    .houseAlbum-view .el-dialog__body{
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
    .houseAlbum-view .el-form-item__content{
        /*margin-right:100px;*/
        margin-left: 0px !important;
        width: 100%;
    }
    . .houseAlbum-view  .el-form-item{
        margin-bottom:0px
    }
</style>

<style scoped rel="stylesheet/scss" lang="scss">
.houseAlbum-view{
    background-color: #ffffff;
    .houseAlbum-view-titel{
        display: flex;
        margin-top: 28px;
        .houseAlbum-view-titel-text{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.85);
            line-height:22px;
            align-self: center;
            margin-left: 8px;
            display: flex;
            .user-input-sure{
                font-size:16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(255,0,0,0.85);
                align-self: center;
            }
        }
        .houseAlbum-view-titel-suer{
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,0,0,0.85);
            line-height:22px;
            align-self: center;
        }
    }
    .houseAlbum-view-album-list{
        display: flex;
    }
    .houseAlbum-view-album{
        margin-top: 16px;
        margin-right: 24px;
        .houseAlbum-view-album-view{
            margin-left: 12px;
        }
        .houseAlbum-view-album-view1{
            margin-left: 12px;
            width:92px;
            height:73px;
            background: url("../../../assets/img/addcopy4@2x.png") no-repeat;
            background-size:92px 73px;
            display: flex;
            justify-content: center;
        }
        .houseAlbum-view-album-view1 i{
           align-self: center;
            font-size: 18px;
            color: #D9D9D9;
        }
        .houseAlbum-view-album-view1 img{
            width: 48px;
            height: 48px;
            align-self: center;
        }
        .houseAlbum-view-album-text{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.55);
            line-height:22px;
            margin-top: 8px;
            text-align: center;
        }
    }
    .houseAlbum-view-textarea{
        width:1072px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        margin-top: 13px;
    }
    .houseAlbum-view-input{
        width:400px;
        height:32px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        margin-top: 16px;
    }
    .houseAlbum-view-addalbum{
        width:1072px;
        min-height:218px;
        background:rgba(255,255,255,1);
        border-radius:8px;
        border:1px #D9D9D9 solid;
        margin-top: 16px;
        margin-bottom: 32px;
        .houseAlbum-view-addalbum-botton{
            display: flex;
            padding: 16px 24px;
            justify-content: space-between;
            .houseAlbum-view-addalbum-botton1{
                display: flex;
            }
            .addalbum-botton1{
                height:32px;
                line-height:32px;
                background:rgba(16,165,22,1);
                border-radius:4px;
                padding: 0px 16px;
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(255,255,255,1);
                margin-left: 4px;
                margin-right: 4px;
                cursor: pointer;
            }
            .addalbum-botton2{
                height:32px;
                line-height:32px;
                border:1px #D9D9D9 solid;
                border-radius:4px;
                padding: 0px 16px;
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(39,39,39,1);
                margin-left: 4px;
                margin-right: 4px;
                cursor: pointer;
            }
        }
    }
    .addHouse-user-button{
        display: flex;
        justify-content: center;
        width:1072px;
        margin-bottom: 20px;
        .addHouse-user-button-button1{
            height:32px;
            background:rgba(24,144,255,1);
            border-radius:4px;
            line-height: 32px;
            padding: 0px 16px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-right: 8px;
        }
        .addHouse-user-button-button2{
            height:32px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px #D9D9D9 solid;
            line-height: 32px;
            padding: 0px 16px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.65);
            margin-right: 8px;
        }
    }
}
    .houseAlbum-view-album-img{
        width:100px;
        height:75px;
        background:rgba(255,255,255,1);
        border-radius:8px;
        overflow: hidden;
    }
.houseAlbum-view-album-img img{
    width:100px;
    height:75px;
}
    .addalbum-text{
        height:24px;
        font-size:14px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(208,2,27,1);
        align-self: center;
        margin-left: auto;
        margin-right: 8px;
    }
    .houseAlbum-popover-right{
         width: 90px;
         div{
             height: 30px;
             line-height: 30px;
             font-size:14px;
             font-family:PingFang-SC-Regular;
             font-weight:400;
             color:rgba(102,102,102,1);
             border-bottom: 1px #D9D9D9 solid;
         }
     }

    .img-popover-right{
        width: 90px;
        div{
            height: 30px;
            line-height: 30px;
            font-size:14px;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(102,102,102,1);
            border-bottom: 1px #D9D9D9;
        }
    }
.houseAlbum-view .houseAlbum-view-margin-top{
margin-top: 10px;
    }
.cancel-button{
    padding: 0px;
    width:78px;
    height:32px;
    line-height:32px;
    border-radius:4px;
    border:1px #D9D9D9 solid;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(0,0,0,0.25);
    text-align: center;
}
.sure-button{
    padding: 0px;
    width:78px;
    height:32px;
    line-height:32px;
    border-radius:4px;
    background:rgba(24,144,255,1);
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: center;
}
    .houseAlbum-view-input-itemArr{
        margin-top: 15px;
    }
</style>